<!--  -->
<template>
  <div class='task'>

    <!--        头部-->
    <head-top></head-top>
    <div style="width: 100%;height: 50px;"></div>
    <div class="vantTabs">
      <van-tabs sticky title-active-color="#fbef1a" @click="clickTitle">
        <van-tab v-for="(item,index) in taskList" :key="index">
          <template #title>{{ item.title }}</template>
          <div class="search">
            <div class="searchpd">
              <input placeholder="标题：商家微信号；商务微信号" v-model="page.query"/>
              <p @click="query">查询</p>
            </div>
          </div>
          <div style="width: 100%;height: 100px;"></div>
          <div class="taskcon">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="onLoad"
            >

              <div class="taskconmsg" v-for="(item,index) in list" :key="index">
                <div class="item">
                  <div>{{ item.title }}</div>
                  <ul>
                    <li>
                      <div>状态：</div>
                      <div class="reslut">{{ item.taskStatus }}</div>
                    </li>
                    <li>
                      <div>任务类型：</div>
                      <div class="reslut">{{ item.taskType }}</div>
                    </li>
                    <li>
                      <div>更新时间：</div>
                      <div class="reslut">{{ item.updateTime }}</div>
                    </li>
                    <li>
                      <div>发布时间：</div>
                      <div class="reslut">{{ item.createTime }}</div>
                    </li>
                    <li>
                      <div>商家名称：</div>
                      <div class="reslut">{{ item.nickName }}</div>
                    </li>
                    <li>
                      <div>商家联系微信号：</div>
                      <div class="reslut">{{ item.shopWeixin }}</div>
                    </li>
                    <li>
                      <div>本金：</div>
                      <div class="reslut">{{ item.capital }}</div>
                    </li>
                    <li>
                      <div>佣金：</div>
                      <div class="reslut">{{ item.commission }}</div>
                    </li>
                    <li>
                      <div>上限人数：</div>
                      <div class="reslut">{{ item.needMan }}</div>
                    </li>
                    <li>
                      <div>待确认人数：</div>
                      <div class="reslut">{{ item.numberToConfirmed }}</div>
                    </li>
                    <li>
                      <div>已确认人数：</div>
                      <div class="reslut">{{ item.confirmedNumber }}</div>
                    </li>
                    <li>
                      <div>是否新人可做：</div>
                      <div class="reslut">{{ item.newManDoAble }}</div>
                    </li>
                    <li>
                      <div>是否实名：</div>
                      <div class="reslut">{{ item.isRealname }}</div>
                    </li>
                  </ul>
                </div>
                <button tag="div" @click="audit(item.id)" v-if="currentTag == 3 && item.taskStatus == '待审核'" class="audit">
                  审核
                </button>
                <button tag="div" @click="deleteTask(item.id)" v-if="currentTag == 3 || currentTag == 1" class="audit">
                  删除
                </button>
                <div class="repeatflex" v-show="repeatflexFlag">
                  <div class="repeat" @click="rePublic(item.id)">重发</div>
                  <div class="colse" @click="updateStatus(item.id,4)">关闭</div>
                </div>
              </div>

            </van-list>
          </div>
        </van-tab>
      </van-tabs>
    </div>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;
import headTop from "../../components/base/headTop.vue"
import taskApi from "@/api/task"
import quanApi from '@/api/quan'
import {Toast} from "vant";
import shopApi from "@/api/shop";

export default {
//import引入的组件需要注入到对象中才能使用
  components: {
    headTop
  },
  data() {

    return {
      page: {
        pageNo: 1,
        pageSize: 10,
        taskStatus: 1,
        query: ''
      },
      currentTag: 0,
      list: [],
      taskList: [],
      repeatflexFlag: false,
      loading: false,
      finished: false,
    };
  },
//监听属性 类似于data概念
  computed: {},
//监控data中的数据变化
  watch: {},
  created() {
    taskApi.auditList(this.page).then(res => {
      console.log(res)
      console.log(res.data.records)
      this.list = this.list.concat(res.data.records)
    })
    this.taskListLoad()
    this.taskTabList()
  },
  methods: {
    rePublic(id){
      let param = {sxTaskId:id}
      taskApi.rePublish(param).then(res=>{
        Toast(res.message)
      })
    },
    taskTabList() {
      taskApi.taskTabList().then(res => {
        console.log( res.data.records)
        this.taskList = res.data.records
      })
    },
    clickTitle(name) {
      this.page.pageNo = 1
      this.page.query = ''

      if (name == 1) {
        this.repeatflexFlag = true
      } else {
        this.repeatflexFlag = false
      }

      this.currentTag = name
      this.page.taskStatus = this.taskList[name].status
      if (name == 3) {
        this.page.taskStatus = ""
        this.auditListLoad()
      } else {
        this.taskListLoad()
        taskApi.auditList(this.page).then(res => {
          this.list = this.list.concat(res.data.records)
        })

      }
      // this.onLoad()
      this.finished = false

    },

    deleteTask(id){
      taskApi.deleteTask(id).then(res=>{
        Toast(res.message)
        this.page.pageNo = 1
        this.page.query = ''
        taskApi.auditList(this.page).then(res => {
          this.list = res.data.records
          this.currentTag = 1
        })
      })
    },
    auditListLoad() { // 组长或主管任务审核列表
      taskApi.auditList(this.page).then(res => {
        console.log(res)
        this.list = res.data.records
      })
    },
    taskListLoad() { // 我发布的任务列表
      taskApi.publishTaskList(this.page).then(res => {
        this.list = res.data.records
      })
    },
    audit(id) { //审核
      let json = {
        id: id,
        taskStatus: 3
      }
      taskApi.auditTask(json).then(res => {
        Toast(res.message)
        this.page.pageNo = 1
        this.page.query = ''
        taskApi.auditList(this.page).then(res => {
          this.list = res.data.records
          this.currentTag = 3
        })

      })
    },
    query() {
      this.page.pageNo = 1
      if (this.currentTag == 3) {
        this.auditListLoad()
      } else {
        this.taskListLoad()
      }

    },

    // 重发 // 关闭
    updateStatus(id, status) {
      let json = {
        id: id,
        taskStatus: status
      }
      taskApi.auditTask(json).then(res => {
        Toast(res.message)
        this.page.pageNo = 1
        this.taskListLoad()
      })
    },

    onLoad() {
      this.page.pageNo += 1
      taskApi.auditList(this.page).then(res => {
        if(res.data == null){
          this.loading =false
          this.finished = true;
          this.page.pageNo = 1
          return
        }
        var tal = res.data.pages
        this.list = this.list.concat(res.data.records)
        this.loading =false
        if(tal == 1){
          this.page.pageNo = 1
        }
        if(tal == 0){
          this.page.pageNo = 0
        }
        if (this.page.pageNo == tal) {
          this.finished = true;
          this.page.pageNo = 1
        }


      })
      // for (this.page.pageNo = 1; i < 10; this.page.pageNo++) {
      //   taskApi.publishTaskList(this.page).then(res => {
      //     this.list = this.list.concat(res.data.records)
      //
      //   })

      }

  },


  mounted() {

  },
  beforeCreate() {
  },
  beforeMount() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.task {
  width: 100%;
  min-height: 100%;
  background: #f8f8f8;
}

.audit {
  width: 100%;
  padding: 5px 0;
  border-radius: 20px;
  text-align: center;
  background: #f8f5be;
  margin: 5px auto;
  border: none
}

.vantTabs {
  width: 100%;

  /deep/ .van-tabs__line {
    width: 25%;
    background: #f8f5be;
  }

  /deep/ .van-sticky {
    width: 100%;
    position: fixed;
    top: 50px;
    left: 0;
  }

  .search {
    width: 100%;
    background: white;
    position: fixed;
    top: 94px;
    left: 0;

    .searchpd {
      padding: 10px;
      display: flex;
      align-items: center;

      input {
        flex: 1;
        text-indent: 20px;
        background: #f4f4f4;
        border-radius: 5px;
        height: 30px;
        line-height: 30px;
      }
    }
  }

  .taskcon {
    padding: 10px;

    .taskconmsg {
      .item {
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #d1d1d1;
        background: #f7fbfe;
        margin-bottom: 5px;

        ul {
          width: 100%;

          li {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            align-items: center;
            font-size: 12px;
            color: #727271;

            .reslut {
              color: black;
            }
          }
        }
      }

      .repeatflex {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;

        div {
          width: 49.8%;
          text-align: center;
          padding: 5px 0;
        }

        .repeat {
          background: #abdbe7;
        }

        .colse {
          background: #f8f5be;
        }
      }

      .publish {
        .repeat {
          width: 100%;
        }
      }
    }
  }
}
</style>
